﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>实时库存</title>
    <style>
        body {
            font-family: Arial,'Hiragino Sans GB','微软雅黑',Helvetica,sans-serif;
            font-size: 12px;
            color: yellow;
            background: black;
        }

        body, html {
            height: 100%;
            background: black;
            overflow: hidden;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .clearfix {
            *zoom: 1;
        }

            .clearfix:before,
            .clearfix:after {
                display: table;
                line-height: 0;
                content: "";
            }

            .clearfix:after {
                clear: both;
            }

        .box-bg {
            background: black;
            width: 320px;
            height: 128px;
            text-align: center;
        }

        .f-blue {
            color: #0001FE;
        }

        .f-red {
            color: #FE0100;
        }

        .box-top .box-thead {
            height: 20px;
        }

        .box-thead li {
            float: left;
            width: 12.5%;
            text-align: center;
        }

        .box-body li {
            float: left;
            width: 20%;
            text-align: center;
        }

        .box-red {
            background: #FE0100;
        }

        .box-blue {
            background: #0001FE;
        }

        .box-green {
            background: #00b150;
        }

        .box-orange {
            background: #ffff00;
        }

        .box-white {
            background: #fff;
        }

        .box-null {
            background: transparent;
            border: none;
        }

        .box-default {
            background: #ddd;
        }

        .box-thead li.t-left, .box-body li.t-left {
            text-align: left;
        }

            .box-thead li.t-left label, .box-body li.t-left label {
                padding-left: 5px;
            }

        .box-thead li.t-right, .box-body li.t-right {
            text-align: right;
        }

        .box-top {
            height: 88px;
        }

        .box-bottom {
            height: 37px;
            border-top: 1px solid #ddd;
            padding-top: 2px;
            margin-top: 0;
        }

        .b-red {
            border: 1px solid #ff0000;
        }

        .box-bottom span, .box-bottom label {
            height: 16px;
            display: block;
            font-size: 12px;
        }

        .box-left {
            float: left;
            height: 128px;
            vertical-align: middle;
            width: 40px;
        }

            .box-left h1 {
                color: #fff;
                font-size: 14px;
                font-weight: normal;
                line-height: 128px;
            }

        .box-right {
            float: left;
            width: 280px;
        }

        .box-text .box span, .box-text .box label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 35px;
            display: block;
        }

        .box-thead ul li:last-child .label-con {
            border-right: 0;
        }

        .box-thead {
            height: 32px;
            border: 1px solid #ebebeb;
        }

            .box-thead ul li {
                float: left;
            }

                .box-thead ul li .label-con {
                    display: block;
                    height: 32px;
                    border-right: 1px solid #ebebeb;
                }

                .box-thead ul li.w15, .box-item ul li.w15 {
                    width: 15%;
                }

                .box-thead ul li.w35, .box-item ul li.w35 {
                    width: 35%;
                }


        .box-item ul li {
            float: left;
        }

            .box-item ul li span {
                display: block;
                height: 22px;
                line-height: 22px;
                border-right: 1px solid #ebebeb;
            }

        .box-item {
            height: 21px;
            border: 1px solid #ebebeb;
            border-top: 0;
        }

        .box-item-box {
            padding-left: 2px;
        }

            .box-item-box .box {
                width: 20px;
                height: 16px;
                border: 1px solid #ebebeb;
                margin-right: 5px;
                margin-top: 2px;
            }
    </style>
</head>

<body>

    <div class="box-bg">
        <div class="box-content">
            <div class="box-thead">
                <ul>
                    <li class="w15">
                        <div class="label-con">
                            <span>项目</span>
                            <p>Project</p>
                        </div>
                    </li>
                    <li class="w15">
                        <div class="label-con">
                            <span>零件号</span>
                            <p>Part No.</p>
                        </div>
                    </li>
                    <li class="w35">
                        <div class="label-con">
                            <span>零件名称</span>
                            <p>Part Description</p>
                        </div>
                    </li>
                    <li class="w35">
                        <div class="label-con">
                            <span>实时库存</span>
                            <p>Real Time Stock</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="ProductList">
            </div>

        </div>
    </div>

</body>
</html>

<script src="~/Scripts/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var page = function () {

        var handle1 = function () {
            var data = [];
            var thread = null;
            var total = 0, pageSize = 4, residue = 0, pageIndex = 0, initialValue = 0;
            var maxProductCount = 4;
            var productTimeOut = 3000;
            var frame = $('#ProductList');

            var createProduct = function () {
                frame.html('');
                for (var i = initialValue, count = 1; i < data.length; i++, count++) {
                    var product = data[i];

                    var content = $("<div class='box-item'>");
                    var body = $("<ul></ul>")
                        .append("<li class='w15'><span>" + product.Propertys[0] + "</span></li>")
                        .append("<li class='w15'><span>" + product.Propertys[1] + "</span></li>")
                        .append("<li class='w35'><span>" + product.Propertys[2] + "</span></li>");
                    var col = 'box-green';
                    if (product.CarCount <= product.MiniCount) col = 'box-red';
                    var items = $("<ul class='box-item-box'></ul>");
                    var k = 1;
                    while (k < maxProductCount + 1) {
                        if (k <= product.CarCount) {
                            items.append("<li class='box " + col + "'></li>");
                        } else {
                            items.append("<li class='box box-white'></li>");
                        }
                        k++;
                    }
                    body.append($("<li class='w35'></li>").append(items));
                    content.append(body);
                    frame.append(content);

                    if (count == pageSize) break;//每页显示4条
                }

                pageIndex++;
                initialValue = (pageIndex * pageSize) - 1;
                if (pageIndex == total - 1) {
                    initPage();
                }
            }

            var getStorage = function () {
                clearInterval(thread);

                $.ajax({
                    type: 'GET',
                    timeout: 5000,
                    url: '/Display/GetProductList',
                    async: true,
                    success: function (d) {
                        if (d.rows.length > 0) {

                            residue = d.rows.length % 4;
                            total = Math.ceil(d.rows.length / 4);
                            if (residue > 0) total += 1;
                            data = d.rows;
                            thread = setInterval(function () { createProduct(); }, productTimeOut);
                        } else {
                            thread = setInterval(function () { getStorage(); }, productTimeOut);
                        }
                    }
                });
            }

            var initPage = function () {
                pageIndex = initialValue = 0;
                getStorage();
            }

            getStorage();
        };

        var reload = function () {
            setTimeout(function () {
                window.location.replace('ShowStorage');
            }, 600000);
        };

        return {
            init: function () {
                handle1();
                reload();
            }
        };
    }();

    jQuery(document).ready(function () {
        page.init();
    });
</script>
